<template>
  <!-- 金额输入框 -->
  <el-input
    :disabled="disabled"
    v-model="moneny"
    @focus="onFocusChange"
    @blur="onBlurChange($event)"
    :placeholder="placeholder"
  >  <template slot="append">
    <slot name="append"></slot>
  </template>
  </el-input>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: "",
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default:false
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      amount: this.value,
      moneny: "",
    };
  },
  watch: {
    value: {
      handler(newValue) {
        if (newValue) {
          this.moneny = this.thousands(newValue);
        } else {
          this.moneny = "";
        }
      },
      immediate: true,
    },
  },
  methods: {
    onFocusChange() {
      if (this.moneny) {
        this.moneny = this.translateNumber(this.moneny);
      }
    },
    onBlurChange(event) {
      if (isNaN(event.currentTarget.value * 1)) {
        this.$set(this, "moneny", "");
        this.$message.warning("金额请输入数字");
        return;
      }
      this.$emit("change", event.currentTarget.value);
    },
  },
};
</script>
